<template>
  <div class="recommend-item">
    <router-link class="item-link" to="#">
      <div class="img-wrap">
        <img :src="goods.image" />
      </div>
      <div class="info-wrap">
        <div class="title">
          {{ goods.gName }}
        </div>
      </div>
      <div class="price-wrap">
        <span class="current-price"> <em>￥</em>{{ goods.discountPrice }}</span>
        <span
          class="original-price"
          v-if="goods.discountPrice != goods.originalPrice"
        >
          <em>￥</em><del>{{ goods.originalPrice }}</del></span
        >
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    goods: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
.recommend-item {
  margin: 0 13px 20px 0;
  float: left;
  width: 330px;
  height: 174px;
  background-color: #f7f9fa;
  border: 1px solid #f7f9fa;
  overflow: hidden;
  transition: all 0.7s;
  border-radius: 10px;
  position: relative;

  .item-link {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 11px;
    box-sizing: border-box;

    .img-wrap {
      position: absolute;
      width: 150px;
      height: 150px;
      transition: all 0.3s;
      img {
        border-radius: 10px;
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .img-wrap:hover {
      opacity: 0.9;
    }

    .info-wrap {
      margin-left: 165px;
      height: 116px;
      font-size: 16px;
      overflow: hidden;

      .title {
        margin: 6px 0 2px 0;
        overflow: hidden;
        max-height: 46px;
      }
    }

    .price-wrap {
      margin-left: 165px;
      line-height: 22px;
      color: #ff5000;
      display: flex;
      justify-content: space-around;
      align-items: center;
      em {
        font-size: 14px;
        margin-right: 3px;
      }
      .current-price {
        font-size: 22px;

        display: inline-block;
        margin-right: 15px;
      }

      .original-price {
        font-size: 16px;

        color: #ccc;
        display: inline-block;
      }
    }
  }
}
.recommend-item:hover {
  border-color: #ff4746;
}
</style>
